<template>
<div class="box">
     <div class="hang">
         <div class="b1">爆爆团</div>
         <div class="di">
            <span class="iconfont icon-gengduo"></span>
            <span class="iconfont icon-iconfontcolor96"></span>
         </div>
     </div>
     <div class="hang5">规则</div>
     <div class="hang2">限时爆款超级低价</div>
     
     <div class="hang1">
      即将开抢
     </div>
     <div class="hang3">
        <span :class="{h3:true,active:zxcvindex==lin}" v-for="(it,lin) in lei" :key="lin" @click="qianggou(lin)">{{it.text}}</span>
     </div>
     <div class="hang4" v-for="(item,index) in lists" :key="index">
        <div class="i1"><img :src="item.picture" alt=""></div>
        <div class="i2">
        <div> {{item.name}}</div>
         <div>{{item.month_saled_content}}</div>
        <div>{{item.min_price}}</div>
        <div >
         <span class="zx1">{{item.promotion_info}}</span>
         <span class="zx2" @click="shijian(item)">{{(item.status==0?'马上抢':'已抢')}}</span>
      </div >
        <div class="zx">{{item.unit}}</div>
        </div>
     </div>
    
</div>
 </template>
 
 <script>
 import { tuan_list } from '../api';
 export default {
   data(){
      return{
         zxcvindex:0,
         lei:[
            {ip:1,text:'正在抢购'},
            {ip:2,text:'上新预告'},
         ],
         lists:[]
      }
   },
   methods:{
      shijian(item){
if(item.status==0){
   item.status=1
}
      },
qianggou(lin){
this.zxcvindex=lin
   if(lin==0){
      tuan_list({status:0}).then((res)=>{
      this.lists=res.data.list
   
   })
}else{
   tuan_list({status:1}).then((res)=>{
      this.lists=res.data.list
   })
}
}
},
 mounted(){
   tuan_list({status:0}).then((res)=>{
      this.lists=res.data.list
      console.log(res.data.list);
   })
 }
 }
 </script>
 
 <style scoped>
 .box{
     height: 260px;
     /* background-color:#ff4f00; */
     background:linear-gradient(to bottom,#e93323,#f1ab3c);
     padding: 10px 20px;
 }
 .hang{
     color: white;
 }
 .b1{
     font-size: 35px;
     float: left;
     margin-left: 110px;
     font-family:cursive;
     
 }
 .di{
     width: 80px;
     height: 40px;
     border-radius: 20px;
     background-color: #c62a1c;
     padding: 0 10px;
     float: right;
 
 }
 .iconfont{
     font-size: 26px;
     line-height: 36px;
 }
 .icon-gengduo{
     margin-right: 28px;
 }
 .hang2{
    clear: both;
    color: white;
    height: 50px;
    font-size: 42px;
    font-family:cursive;
    margin-left: 20px;
 }

 .hang5{
 clear: both;
 width: 40px;
    margin-top: 70px;
    margin-left: 350px;
    color: #eee;
 }
 .hang3{
   color: white;
   font-size: 18px;
 }
 .h3{
   margin-right: 10px;
 }
 .hang4{
    font-size: 18px;
    margin-top: 30px;
    width: 370px;
    height: 150px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-top: 10px;
    background-color: white;
    display: flex;
 }
 .i1{
   width: 160px;
   height: 160px;
   margin: 10px;
   
 }
 .i2{
   flex: 1;
 }
 .i2 div{
   margin-top: 3px;
 }
 .i2 div:nth-child(1){
   font-weight: bold;
 }
 .i2 div:nth-child(2){
   color: red;
 }
 .i2 div:nth-child(3){
   color: red;
   font-size: 22px;
 }
 img{
   width: 100%;
 }
.active{
   display: inline-block;
font-weight: bold;
border-bottom: 3px solid white;
height: 40px;
line-height: 40px;
}
.zx{
   clear: both;
}
.zx1{
   float: left;
}
.zx2{
   display: inline-block;
   float: right;
   width: 80px;
   height: 40px;
   border-radius: 20px;
   line-height: 40px;
   text-align: center;
   background-color: #eb4f27;
   color: white;
}
.hang1{
   width: 70px;
   height: 20px;
   color: #c62a1c;
   border-radius: 15px;
   background-color: white;
   text-align: center;
   line-height: 20px;
   font-size: 14px;
   margin-left: 85px;
   margin-top: 20px;
}
 </style>